<template>
	<view class="mask">
		<view class="mask__main">
			<view class="main__header">
				<text class="header__title">{{stockDetail.name}}</text>
				<uni-icons type="close" color="#666" size="26" @click="closeClick"></uni-icons>
			</view>
			<view class="main__item">
				<text class="item__label">{{$t("trade.direction")}}</text>
				<view class="item__value">
					<text class="value__text value__text--active">{{btnType===1?$t('stock.buy'):$t('stock.sell')}}</text>
					
				</view>
			</view>
			<view class="main__item">
				<text class="item__label">{{$t('stock.tradeType')}}</text>
				
				
				<view class="item__value" >
					<!-- <text class="value__text value__text--active">{{$t('stock.value')}}</text> -->
					
					<text :class="['value__text', optionIndex1===index?'value__text--active':'']"
					v-for="(item,index) in options1" :key="index" @click="optionClick1(index)">{{item}}</text>
				</view>
				
			<!-- 	<view class="item__value" v-if="this.stockDetail.xianjia === 0">
					
					
					<text class="value__text value__text--active">{{$t('stock.value')}}</text> 
					
			</view> -->
				
				
			</view>
			
			
			<view class="main__item" v-if="optionIndex1===1 ">
				<text class="item__label">{{$t('stock.price1')}}</text>
				
				<view  class="item__value" >
				     <input type="digit"  v-model="stockDetail.price" class="item__input" />
					<!-- <uni-number-box v-model="price_1" :max="9999999999" :min="0.01" background="#458EF4"
					color="#fff" /> -->
				</view>
			</view>
			
			
			
			
			
			
			
			<view class="main__item" v-if="btnType===0">
				<text class="item__label">{{$t('stock.close')}}</text>
				<view class="item__value">
					<text :class="['value__sell', sellIndex===index?'value__sell--active':'']"
					 v-for="(item, index) in sellOptions"  @click="sellOptionChange(index)"
					:key="index">{{item}}</text>
				</view>
			</view>
			<view class="main__item">
				<text class="item__label">{{$t('stock.tradeNum')}}</text>
				<view  class="item__value" v-if="btnType===1">
					<!-- <uni-number-box v-model="inputNum" :max="9999999999" :min="0" background="#2DC065" 
					color="#fff" /> -->
					<uni-number-box v-model="inputNum" :max="9999999999" :min="1" background="#458EF4"
					color="#fff" />
				</view>
				<view class="item__value" v-else>
					<uni-number-box v-model="inputNum" :disabled="isDis" :max="haveNums" :min="0" 
					background="#458EF4" color="#fff" />
				</view>
			</view>
			<view class="main__tips">
				<view class="tips__text">{{$t('stock.holdNum')}}：{{haveNums}}</view>
				<view class="tips__text"> {{$t('trade.cash')}}：{{amount}}</view>
			</view>
			<view class="main__btn">
				<text :class="['btn__text', btnType===0?'btn__text--sell':'']" @click="enterClick">
					{{$t('stock.enterBtn')}}
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				options:[this.$t('stock.buy'), this.$t('stock.sell')],
				optionIndex:0, //選項索引  0卖出 1买入  
				optionIndex1:0,
				/* inputNum:100, */ //輸入數量
				inputNum:0,
				sellOptions:[this.$t('stock.yes'), this.$t('stock.no')],
				sellIndex:-1,
			
				options1:[this.$t('stock.value'), this.$t('stock.price3')],
				sellIndex1:-1,
				price_1:0,
			
				
				isDis:false, //是否禁用
			}
		},
		props:{
			isShowTrade:{
				type:Boolean,
				default:false
			},
			btnType:{ //  1買 0賣 
				type:Number,
				default:1
			},
			stockDetail:{ //股票詳情
				type:Object,
				default:()=>({})
			}
		},
		computed:{
			haveNums(){ //chicangshu
				return this.stockDetail.chicang || 0
			},
			amount(){ //chicangshu
				return this.stockDetail.amount || 0
			}
		},
		created() {
			this.price_1 = this.stockDetail.price
			// if(!this.stockDetail.xianjia){
			// 	this.price_1 = this.stockDetail.price
			// }else{
			// 	this.price_1 = this.stockDetail.xianjia_amount
			// }
			
			this.optionIndex = this.btnType
		},
		methods:{
			//買賣操作
		async	enterClick(){
				let {price, id} = this.stockDetail
				let inputNum = Number(this.inputNum)
				console.log(this.optionIndex1)
				
				
				if(this.optionIndex1 === 1 && this.stockDetail.xianjia_amount != this.price_1 ){
					//限价单子
					// uni.showToast({
					// 	title:this.$t('stock.error1'),
					// 	icon:"none"
					// })
					// return ;
					
				}
				
				/* if(!inputNum || inputNum < 100){
					uni.showToast({
						title:this.$t("stock.tradeTips"),
						icon:"none"
					})
					return
				} */
				uni.showLoading({
					title:this.$t('loading.loading'),
					mask:true
				})
				let params = {
					"fangxiang": "duo",//kong 做空  duo做多
					"type": this.optionIndex,// 0卖出 1买入  
					"pro_id": id,//股票id
					"buytype": this.optionIndex1,//0限价  1时价
					"price": price,//价格
					"shuliang": inputNum//数量
				}
				
				console.log(params)
				if(inputNum < 1){
					//account.shuliang
					uni.showToast({
						title:this.$t('account.shuliang'),
						icon:"none"
					})
					return ;
				}
				let res = await this.$api.buySellStock(params)
				uni.hideLoading()
				if(res.code === 1){
					uni.showToast({
						title:this.$t('trade.done') ,
						mask:true,
						icon:"success"
					})
					setTimeout(()=>{
						this.$emit("updateDetail")
						this.closeClick()
						uni.switchTab({
							url:"/pages/trade/trade"
						})
					}, 1200)
				}else{
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
				}
			},
			closeClick(){
				this.$emit("update:isShowTrade", false)
			},
			// 買賣切換
			optionClick(index){
				if(this.optionIndex !== index){
					this.optionIndex = index
				}
			},
			optionClick1(index){
				if(this.optionIndex1 !== index){
					this.optionIndex1 = index
				}
			},
			// 卖出选项切换
			sellOptionChange(index){
				if(this.sellIndex !== index){
					this.sellIndex = index
					if(index=== 0){//平仓  
						// if(this.haveNums >= 100){
						// 	this.isDis = true
						// 	this.inputNum = this.haveNums
						// }
						this.isDis = true
						this.inputNum = this.haveNums
					}else{
						this.isDis = false
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mask{
		@include fixedFullScreen(9999);
		@include flexCenter(column);
		justify-content: flex-end;
		
		.item__input{
			flex: 1;
			font-size: 40rpx;
			color: #fff;
			background-color: #458EF4;
			width: 300rpx;
			text-align: center;
			border-radius: 10rpx;
		}
		
		
		.mask__main{
			width: 750rpx;
			background: #161827;
			padding: 30rpx 40rpx;
			padding-bottom: 50rpx;
			box-sizing: border-box;
			.main__header{
				@include flexRowAlign(space-between);
				.header__title{
					font-size: 36rpx;
					font-weight: 800;
					color: #fff;
				}
				margin-bottom: 30rpx
			}
			.main__item{
				@include flexRowAlign(space-between);
				height: 98rpx;
				// border-top: 1rpx solid #EEEEEE;
				.item__label{
					font-size: 32rpx;
					color: #fff;
				}
				.item__value{
					@include flexRowAlign(space-between);
					.value__text,.value__sell{
						/* width: 120rpx; */
						height: 60rpx;
						padding-left: 20rpx;
						padding-right: 20rpx;
						background: #CCCCCC;
						border-radius: 6rpx;
						@include flexCenter();
						font-size: 32rpx;
						color: #FFFFFF;
						margin-left: 24rpx;
					}
					.value__text--active{
						background: #2DC065;
					}
					.value__input{
						width: 100%;
						font-size: 30rpx;
						color: #fff;
					}
					::v-deep .uni-numbox__value{
						width: 150rpx;
						height: 68rpx;
					}
					.value__sell--active{
						background: #DF4140;
					}
				}
			}
			.main__tips{
				margin-top: 30rpx;
				.tips__text{
					font-size: 28rpx;
					color: #999999;
					margin-bottom: 20rpx;
				}
			}
			.main__btn{
				@include flexRowAlign(center);
				margin-top: 60rpx;
				.btn__text{
					@include flexCenter(column);
					width: 600rpx;
					height: 98rpx;
					background: #2DC065;
					border-radius: 12rpx;
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 800;
					color: #FFFFFF;
				}
				.btn__text--sell{
					background: #DF4140;
				}
			}
		}
	}
</style>